<template>
  <ex-dialog
    width="700px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="登录账号:" prop="account">
				<el-input type="text" v-model="ruleForm.account" autocomplete="off" placeholder="输入手机号" maxlength="11"></el-input>
        <div class="tips">默认登录密码：sy123456</div>
			</el-form-item>
			<el-form-item label="主播昵称:" prop="nickName">
				<el-input type="text" v-model="ruleForm.nickName" autocomplete="off" placeholder="请填写主播昵称" maxlength="11"></el-input>
			</el-form-item>
      <el-form-item label="抖音号:" prop="dyNumber">
        <el-input type="text" v-model="ruleForm.dyNumber" autocomplete="off" placeholder="请填写抖音号" :style="{width: inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="绑定抖音门店：" prop="dyShopAccountId" v-if="ruleForm.type==2">
        <el-select v-model="ruleForm.dyShopAccountId" filterable placeholder="请选择" :style="{width: inputWidth}">
          <el-option v-for="item in dyShopAccountIdLs" :key="item.productId" :label="item.name" :value="item.productId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="积分价值:" prop="integralValue">
        <span>主播1积分可抵</span>
        <el-input type="text" v-model="ruleForm.integralValue" placeholder="请输入" style="width: 290px;margin-left: 20px;"><template slot="append">元</template></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
        <el-button @click="handleClose('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  addUser,shopSelect
} from "@/api/setting/anchorList"

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    var validateAccount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("输入手机号"));
      } else {
        if (value !== "") {
          var reg = /^[0-9]*$/;
          if (reg.test(value) === false) {
            callback(new Error("请输入数字"));
          }
        }
        callback();
      }
    };
    var integralValueCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("输入积分价值"));
      } else {
        if (value !== "") {
          var reg = /^\d+(\.\d{1,4})?$/;
          if (reg.test(value) === false) {
            callback(new Error("请输入正确数值，最多保留4位小数"));
          }
        }
        callback();
      }
    };
    return {
      inputWidth: "400px",
      loading: false,
      imgLoading: false,
      anchorTypeLs:[],//主播类型数组
      dyShopAccountIdLs:[],//抖音门店
      ruleForm: {
        type:'',//主播类型
        id: '',//id
        account: '',//	登录帐号
        dyNumber: '',//抖音号
        nickName: '',//主播昵称
        dyShopAccountId:'',//抖音生活服务商家账户id
        integralValue:'',//积分价值
      },
      rules: {
        type: [
          { required: true, message: '请选择主播类型', trigger: ['change','blur'] }
        ],
        account: [
          { required: true, validator: validateAccount, trigger: ['change','blur'] }
        ],
        dyNumber: [
          { required: true, message: '请输入抖音号', trigger: ['change','blur'] }
        ],
        nickName: [
          { required: true, message: '请输入主播昵称', trigger: ['change','blur'] }
        ],
        dyShopAccountId: [
          { required: true, message: '请选择绑定抖音门店', trigger: ['change','blur'] }
        ],
        integralValue: [
          { required: true, validator: integralValueCheck, trigger: ['change','blur'] }
        ],
      }
    }
  },
  computed: {

  },
  created() {
    this.ruleForm.id = this.id
    this.title = '新增主播'
    this.getAnchorTypeLs()
    this.getShopSelect()
  },
  methods: {
    //获取主播类型字典
    getAnchorTypeLs() {
        var dictType = "anchor_sys_user_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.anchorTypeLs = res.result[0].dictList;
          })
          .catch(() => {});
    },
    //获取抖音门店下拉列表
    getShopSelect(){
      shopSelect().then(res => {
        this.dyShopAccountIdLs = res.result
      })
    },
    //获取详情
    getDatail() {
      var id = this.id
      activityDetail(id).then(res => {
        this.ruleForm = res.result
      })
    },
    //新增主播
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          var data = {
            ...this.ruleForm
          }
          addUser(data).then(res => {
            setTimeout(() => {
              this.handleClose()
              this.$message.success('创建成功')
              this.$emit('success')
              this.loading = false
            }, 1000);
          }).catch(() => {
            this.loading = false
          }).finally(() => {

          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //取消
    handleClose(formName) {
      this.$emit('update:visible', false)
      // this.$refs[formName].resetFields();
    },
    //确认
    handleConfirm() {
      this.$emit('success', '你好')
    },
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}

::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}

.avatar-uploader2 {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 130px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
}

.banner_img {
  width: 130px;
  height: 130px;
}

.el-input {
  width: 300px;
}
</style>